<template>
  <el-form
    :model="model"
    label-width="80px"
    class="mb-3"
    size="small"
  >
    <el-row :gutter="20">
      <slot />

      <template v-if="showSearch">
        <slot name="show" />
      </template>

      <el-col
        :span="8"
        :offset="showSearch ? 0 : 8"
      >
        <div class="flex items-center justify-end">
          <el-button
            type="primary"
            @click="$emit('search')"
          >
            搜索
          </el-button>

          <el-button @click="$emit('reset')"> 重置 </el-button>

          <el-button
            v-if="hasShowSearch"
            type="primary"
            text
            @click="showSearch = !showSearch"
          >
            {{ showSearch ? "收起" : "展开" }}
            <el-icon>
              <ArrowUp v-if="showSearch" />
              <ArrowDown v-else />
            </el-icon>
          </el-button>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import { ref, useSlots } from "vue";

defineProps({
  model: Object,
});

defineEmits(["search", "reset"]);
// 是收起还是展开
const showSearch = ref(false);

const slots = useSlots();
console.log("获取Search组件插槽相关信息：", slots);

// !!强行转换为Boolean型
const hasShowSearch = ref(!!slots.show); // 判断是否使用过show插槽
</script>
